<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务包派发</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.14/index.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.3.14/index.full.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-plus-icons-vue/2.1.0/index.iife.min.js"></script>
    <script src="/lib/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <el-container>
            <el-main>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <h2>服务包派发</h2>
                        </div>
                    </template>
                    <el-form :model="form" label-width="120px">
                        <el-form-item label="仓库UUID">
                            <el-input v-model="form.cangKuUuid" placeholder="请输入仓库UUID"></el-input>
                        </el-form-item>
                        <el-form-item label="上传文件">
                            <el-upload
                                class="upload-demo"
                                :action="null"
                                :auto-upload="false"
                                :on-change="handleFileChange"
                                :on-remove="handleFileRemove">
                                <template #trigger>
                                    <el-button type="primary">选择文件</el-button>
                                </template>
                                <template #tip>
                                    <div class="el-upload__tip">请选择需要派发的文件</div>
                                </template>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm" :loading="loading">派发</el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-main>
        </el-container>
    </div>

    <script>
        const { createApp, ref } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        const app = createApp({
            setup() {
                const form = ref({
                    cangKuUuid: '',
                });
                const loading = ref(false);
                const selectedFile = ref(null);

                const handleFileChange = (file) => {
                    console.log('选择文件:', file.name);
                    selectedFile.value = file.raw;
                };

                const handleFileRemove = () => {
                    console.log('移除文件');
                    selectedFile.value = null;
                };

                const resetForm = () => {
                    console.log('重置表单');
                    form.value.cangKuUuid = '';
                    selectedFile.value = null;
                    // 重置上传组件
                    const uploadRef = document.querySelector('.upload-demo');
                    if (uploadRef) {
                        uploadRef.__vue__?.clearFiles();
                    }
                };

                const submitForm = async () => {
                    if (!form.value.cangKuUuid) {
                        ElMessage.error('请输入仓库UUID');
                        return;
                    }
                    if (!selectedFile.value) {
                        ElMessage.error('请选择文件');
                        return;
                    }

                    console.log('开始派发文件:', {
                        cangKuUuid: form.value.cangKuUuid,
                        fileName: selectedFile.value.name,
                        fileSize: selectedFile.value.size
                    });

                    loading.value = true;
                    try {
                        const formData = new FormData();
                        formData.append('cangKuUuid', form.value.cangKuUuid);
                        formData.append('file', selectedFile.value);

                        console.log('发送请求...');
                        const response = await axios.post('/dispatch', formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        });
                        console.log('收到响应:', response.data);

                        if (response.data.code === 200) {
                            console.log('派发成功');
                            ElMessageBox.alert(
                                `<div style="text-align: center;">
                                    <i class="el-icon-success" style="font-size: 48px; color: #67C23A;"></i>
                                    <p style="margin-top: 10px;">文件派发成功！</p>
                                    <p style="color: #909399; font-size: 14px;">
                                        文件名：${selectedFile.value.name}<br>
                                        大小：${(selectedFile.value.size / (1024 * 1024)).toFixed(2)}MB<br>
                                        目标服务器：${form.value.cangKuUuid}
                                    </p>
                                </div>`,
                                '派发成功',
                                {
                                    type: 'success',
                                    dangerouslyUseHTMLString: true,
                                    confirmButtonText: '确定',
                                    callback: () => {
                                        resetForm();
                                    }
                                }
                            );
                        } else {
                            console.error('派发失败:', response.data);
                            ElMessageBox.alert(
                                `<div style="white-space: pre-line">${response.data.msg}</div>`,
                                '派发失败',
                                {
                                    type: 'error',
                                    dangerouslyUseHTMLString: true,
                                    confirmButtonText: '确定',
                                    callback: () => {}
                                }
                            );
                        }
                    } catch (error) {
                        console.error('请求异常:', error);
                        const errorMsg = error.response?.data?.msg || error.message || '派发失败';
                        ElMessageBox.alert(
                            `<div style="white-space: pre-line">${errorMsg}</div>`,
                            '派发失败',
                            {
                                type: 'error',
                                dangerouslyUseHTMLString: true,
                                confirmButtonText: '确定',
                                callback: () => {}
                            }
                        );
                    } finally {
                        loading.value = false;
                    }
                };

                return {
                    form,
                    loading,
                    handleFileChange,
                    handleFileRemove,
                    resetForm,
                    submitForm
                };
            }
        });

        app.use(ElementPlus);
        app.mount('#app');
    </script>

    <style>
        .box-card {
            width: 600px;
            margin: 20px auto;
        }
        .card-header {
            text-align: center;
        }
        .el-main {
            padding: 20px;
        }
    </style>
</body>
</html> 